<template>
    <el-container class="content">
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="name" placeholder="请输入姓名" class="input short"
                                      size="small"></el-input>
                            <el-select v-model="roleType" placeholder="医生状态" class="select short"
                                       size="small">
                                <el-option
                                    v-for="item in roleTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-button class="primary" @click="getList" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                            <el-button @click="dataExport()" size="small">导出</el-button>
                        </div>
                        <div class="text-right">
                            <el-button class="primary" size="small" @click="openBatchEdit">批量设置</el-button>
                            <el-button type="primary" @click="add()" size="small">新增</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header" :stripe="true"
                                   :slotColumns="slotColumns">
                        <template slot="professionalTitle" slot-scope="scope">
                            <span v-if="scope.row.professionalTitle==0">初级</span>
                        </template>
                        <template slot="visitPrice" slot-scope="scope">
                            <span
                                v-if="!scope.row.visitPrice && scope.row.visitPrice != 0">{{scope.row.visitPrice}}</span>
                            <span v-else>{{scope.row.visitPrice.toFixed(2)}}</span>
                        </template>
                        <template slot="professionalTitle" slot-scope="scope">
                            <span v-if="scope.row.professionalTitle==0">初级</span>
                            <span v-if="scope.row.professionalTitle==1">中级</span>
                            <span v-if="scope.row.professionalTitle==2">副高级</span>
                            <span v-if="scope.row.professionalTitle==3">正高级</span>
                        </template>
                        <template slot="introduction" slot-scope="scope">
                            <span
                                :class="{'two-single-line': !$method.getBrowserType('isIE'), 'ellipsis': $method.getBrowserType('isIE')}">{{scope.row.introduction}}</span>
                        </template>
                        <template slot="suspendService" slot-scope="scope">
                            <span v-if="scope.row.suspendService==1">接诊</span>
                            <span v-if="scope.row.suspendService==2">长期停诊</span>
                            <span v-if="scope.row.suspendService==3">不接诊</span>
                            <span v-if="scope.row.suspendService==4">临时停诊</span>
                            <!--                            <span v-if="scope.row.suspendService==5">全部</span>-->
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <el-link :underline="false" type="primary" @click="look(scope.row.id)">查看
                            </el-link>
                            <el-link :underline="false" type="primary" @click="del(scope.row.id)">删除</el-link>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" v-if="page" class="mt30 page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <!--            <transition name="slide">-->
            <!--                <router-view @upload="getList"></router-view>-->
            <!--            </transition>-->
            <dialog-msk :show.sync="showBatchEdit" title="批量设置" :width="'670px'" @save="saveBatchEdit" :center="true"
                        :noEsc="false" :noModal="false" @cancel="closeBatchEdit">
                <div class="clearfix batch-edit">
                    <div class="left">
                        <el-container>
                            <el-header :height="'auto'" class="head">
                                <el-input v-model="batchEditDocName" size="small" placeholder="请输入医生姓名"
                                          clearable @change="batchEditDocChange"></el-input>
                            </el-header>
                            <el-main class="doc-list" v-loading="docListLoading">
                                <div v-for="(item,index) in batchEditDocList" :key="index"
                                     v-if="!batchEditDocNameFilter || (item.name.indexOf(batchEditDocNameFilter)>-1)">
                                    <el-checkbox v-model="item.checked" @change="getDocListSelected"></el-checkbox>
                                    <div class="info ellipsis">
                                        <span class="name">{{item.name}}</span>
                                        <span class="dept" :title="item.department">{{item.department}}</span>
                                    </div>
                                </div>
                            </el-main>
                            <el-footer class="clearfix footer" :height="'40px'">
                                <div class="num">已选中：{{docListSelected.length}}</div>
                                <el-link type="primary" :underline="false" class="mr10" @click="checkAll">全选</el-link>
                                <el-link type="primary" :underline="false" @click="checkInverse">反选</el-link>
                            </el-footer>
                        </el-container>
                    </div>
                    <div class="right">
                        <div class="buttons clearfix">
                            <el-button type="primary" @click="batchSetStatus(1)">设为接诊</el-button>
                            <el-button type="info" @click="batchSetStatus(3)">设为不接诊</el-button>
                            <el-button type="minor" @click="batchSetStatus(4)">设为临时停诊</el-button>
                            <el-button type="danger" @click="batchSetStatus(2)">设为长期停诊</el-button>
                        </div>
                        <div class="cont">
                            <div class="title">批量设置预览</div>
                            <div class="preview">
                                <div v-if="previewDocSelected[0]">
                                    <span v-for="(item, index) in previewDocSelected" :key="index">{{item.name}}<i
                                        v-if="index<previewDocSelected.length-1">、</i></span>
                                    等{{previewDocSelected.length}}人已设为
                                    <span v-if="previewSetStatus==1" class="primary status">接诊</span>
                                    <span v-else-if="previewSetStatus==2" class="danger status">长期停诊</span>
                                    <span v-else-if="previewSetStatus==3" class="info status">不接诊</span>
                                    <span v-else-if="previewSetStatus==4" class="minor status">临时停诊</span>
                                    状态
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </dialog-msk>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import qs from 'qs'
    import dialogMsk from '../components/dialog'

    export default {
        data() {
            return {
                name: '', // 姓名
                roleTypeOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    // {
                    //     label: '全部',
                    //     value: '5'
                    // },
                    {
                        label: '接诊',
                        value: '1'
                    },
                    {
                        label: '长期停诊',
                        value: '2'
                    },
                    {
                        label: '不接诊',
                        value: '3'
                    },
                    {
                        label: '临时停诊',
                        value: '4'
                    }
                ],
                roleType: '', // 人员分类
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '姓名',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'phoneNumber',
                        label: '手机号码',
                        minWidth: '120',
                        align: 'center'
                    },
                    {
                        prop: 'professionalTitle',
                        label: '职称',
                        minWidth: '80',
                        align: 'center'
                    },
                    {
                        prop: 'department',
                        label: '所属科室',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'introduction',
                        label: '简介',
                        minWidth: '240',
                        align: 'center'
                    },
                    {
                        prop: 'visitPrice',
                        label: '诊金',
                        minWidth: '80',
                        align: 'center'
                    },
                    {
                        prop: 'suspendService',
                        label: '状态',
                        align: 'center',
                        minWidth: '80'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '100'
                    }
                ],
                slotColumns: ['visitPrice', 'professionalTitle', 'suspendService', 'operation', 'introduction'],
                page: {},
                index: 1,
                loading: false,
                showBatchEdit: false, // 是否显示批量设置弹窗
                batchEditDocList: [], // 批量设置弹窗医生列表
                docListSelected: [], // 批量设置弹窗已选择医生列表
                docListLoading: [], // 批量设置弹窗已选择医生列表loading
                batchEditDocName: '', // 批量设置弹窗医生搜索框内容
                batchEditDocNameFilter: '', // 批量设置弹窗医生搜索过滤内容
                previewDocSelected: [], // 批量设置弹窗预览已设置医生列表
                previewSetStatus: null // 批量设置弹窗预览已设置状态
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/doctorManage/doctorManageShowPage', {
                    current: this.index || 1,
                    size: 15,
                    name: this.name,
                    suspendService: this.roleType
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            reset() {
                this.name = ''
                this.roleType = ''
                this.getList()
            },
            add() {
                this.$router.push('/monitor/doctor-details')
            },
            look(id) {
                this.$router.push({
                    path: '/monitor/doctor-details',
                    query: {
                        id: id
                    }
                })
            },
            del(id) {
                this.$confirm('是否确认进行删除操作', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true
                    this.$http.get('/doctorManage/deleteDoctorMess', {
                        id: id
                    }).then(result => {
                        this.loading = false
                        if (result.success) {
                            this.getList()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        }
                    })
                }).catch(() => {
                })
            },
            dataExport() {
                let params = {
                    name: this.name,
                    suspendService: this.roleType
                }, url = '/_api/doctorManage/exportDoctorMess'
                url += '?' + qs.stringify(params)
                window.open(location.origin + url, '_blank')
            },
            openBatchEdit() {
                this.showBatchEdit = true
                this.getDocList()
            },
            getDocList() {
                this.docListLoading = true
                this.batchEditDocList = []
                this.$http.get('/doctorManage/doctorManageShowPage', {
                    current: 1,
                    size: 10000
                }).then(result => {
                    if (result.success) {
                        this.batchEditDocList = result.data.records
                    }
                    this.docListLoading = false
                }).catch(() => {
                    this.docListLoading = false
                })
            },
            checkAll() {
                let name = this.batchEditDocName, _this = this
                this.batchEditDocList.map(e => {
                    if (!name) {
                        _this.$set(e, 'checked', true)
                    } else {
                        if (e.name.indexOf(name) > -1) {
                            _this.$set(e, 'checked', true)
                        }
                    }
                })
                this.getDocListSelected()
            },
            getDocListSelected() {
                this.docListSelected = []
                // let name = this.batchEditDocName,
                let _this = this
                this.batchEditDocList.map(e => {
                    // if (!name) {
                    if (e.checked) _this.docListSelected.push(e)
                    // } else {
                    //     if (e.name.indexOf(name) > -1) {
                    //         if (e.checked) _this.docListSelected.push(e)
                    //     }
                    // }
                })
            },
            checkInverse() {
                let name = this.batchEditDocName, _this = this
                this.batchEditDocList.map(e => {
                    if (!name) {
                        _this.$set(e, 'checked', !e.checked)
                    } else {
                        if (e.name.indexOf(name) > -1) {
                            _this.$set(e, 'checked', !e.checked)
                        }
                    }
                })
                this.getDocListSelected()
            },
            batchEditDocChange() {
                this.batchEditDocNameFilter = this.batchEditDocName
                this.getDocListSelected()
            },
            saveBatchEdit() {
                if (this.previewDocSelected[0] && this.previewSetStatus) {
                    let param = {}, list = this.previewDocSelected.map(e => {
                        return e.id
                    })
                    param[this.previewSetStatus] = list
                    this.$http.post('/doctorManage/batchDoctorSettingState', param).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '批量设置成功 '
                            })
                            this.closeBatchEdit()
                            this.getList()
                        }
                    })

                } else {
                    this.$message({
                        type: 'info',
                        message: '请先设置状态'
                    })
                }
            },
            closeBatchEdit() {
                this.showBatchEdit = false
                this.docListSelected = []
                this.previewDocSelected = []
                this.previewSetStatus = null
            },
            batchSetStatus(type) {
                this.previewDocSelected = JSON.parse(JSON.stringify(this.docListSelected))
                this.previewSetStatus = type
            }
        },
        components: {
            tableExample,
            page,
            dialogMsk
        }
    }
</script>

<style scoped lang="less">
    .batch-edit {
        .left, .right {
            width: 300px;
            height: 400px;
            margin-right: 20px;
            float: left;

            &:last-child {
                margin-right: 0;
            }
        }

        .left {
            border: 1px solid #ececec;

            .doc-list {
                height: 300px;
                padding: 0 10px !important;

                > div {
                    margin-bottom: 10px;

                    .el-checkbox {
                        float: left;
                        margin-right: 10px;
                    }

                    .info {
                        display: block;

                        .name {
                            display: inline-block;
                            width: 80px;
                        }
                    }
                }
            }

            .head {
                padding: 10px !important;
            }

            .footer {
                height: 40px;
                line-height: 40px;
                padding: 0 10px !important;

                .num {
                    float: right;
                }
            }
        }

        .right {
            .buttons {
                .el-button {
                    width: 130px;
                    margin-right: 40px;
                    margin-left: 0;
                    float: left;
                    margin-bottom: 15px;

                    &:nth-child(2n) {
                        margin-right: 0;
                    }
                }
            }

            .cont {
                height: 290px;

                .title {
                    line-height: 30px;
                    height: 30px;
                }

                .preview {
                    height: 260px;
                    border: 1px solid #ececec;
                    padding: 10px;
                    overflow-y: auto;

                    .status {
                        margin: 0 3px;

                        &.primary {
                            color: #4995f4;
                        }

                        &.minor {
                            color: #fe9100;
                        }

                        &.info {
                            color: #999;
                        }

                        &.danger {
                            color: #F56C6C;
                        }
                    }
                }
            }
        }
    }
</style>
